{% extends 'layout.html' %}

{% block main %}
    <div class="page-header">
        <h1>
            组织架构成员
            {#        <button class="btn btn-sm btn-success" onclick="create()"><i class="icon-ok"></i>新增</button>#}
        </h1>
    </div><!-- /.page-header -->
    <div class="row">
        <div class="col-xs-12">
            <div id="dialog-alert" class="hide">
                <div class="space-6"></div>
                <p id="dialog-text" class="bigger-110 bolder center grey">
                    <i class="icon-hand-right blue bigger-120"></i>
                </p>
            </div><!-- #dialog-confirm -->
            <div>
                <nav class="navbar-default" style="border: 1px solid transparent;border-color: #e7e7e7;">
                    <div class="container-fluid">
                        <div class="collapse navbar-collapse">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header" style="margin-right: 18px;">
                                <span class="navbar-brand">部门名称</span>
                            </div>
                            <div class="nav navbar-nav form-group">
                                <div class="navbar-form navbar-left">
                                    <div class="form-group">
                                        <input id="part_id" name="part_id" style="width:150px;" type="text"
                                               class="form-control" placeholder="所有部门">
                                    </div>
                                </div>
                            </div>
                            <div class="navbar-header" style="margin-right: 18px;">
                                <span class="navbar-brand">应用类型</span>
                            </div>
                            <div class="nav navbar-nav form-group">
                                <div class="navbar-form navbar-left">
                                    <div class="form-group">
                                        <select id="secrect_type" name="secrect_type">
                                            <option value="autoApp">autoApp</option>
                                            <option value="sendMsg">sendMsg</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="navbar-header" style="margin-right: 18px;">
                                <span class="navbar-brand">请求方法</span>
                            </div>
                            <div class="nav navbar-nav form-group">
                                <div class="navbar-form navbar-left">
                                    <div class="form-group">

                                        <select id="api_method" name="api_method">
                                            <option value="GetMember">GetMember</option>
                                            <option value="GetPart">GetPart</option>
                                            <option value="SendMsg">SendMsg</option>
                                            <option value="SendNews">SendNews</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="navbar-form navbar-right">
                                <button id='btn_search' class="btn btn-sm btn-primary">查询</button>
                            </div>
                        </div>
                    </div>
                    <!-- /.container-fluid -->
                </nav>
            </div>
            <div class="table-header">
                组织成员列表
            </div>
            <div class="table-responsive">
                <table id="tables" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>成员名称</th>
                        <th>电话号码</th>
                        <th>邮箱</th>
                        {#                        <th>操作</th>#}
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

{% endblock %}

{% block script %}
    <script src="/static/js/chosen.jquery.min.js"></script>
    <script src="/static/js/jquery.dataTables.min.js"></script>
    <script src="/static/js/jquery.dataTables.bootstrap.js"></script>
    <script src="/static/js/jquery-ui-1.10.3.full.min.js"></script>
    <script src="/static/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/static/js/all-config.js"></script>
    <script>
        $(document).ready(function () {
            var tableConfig = jQuery.extend(DATATABLE_CONFIG, {
                //绑定列数据，名字和json串里的key相同，只有这里绑定了表格中才会显示数据
                aoColumns: [
                    {
                        "mDataProp": "userid",
                        "sWidth": "null"
                    },
                    {
                        "mDataProp": "name",
                        "sWidth": "null"
                    },
                    {
                        "mDataProp": "mobile",
                        "sWidth": "null"
                    },
                    {
                        "mDataProp": "email",
                        "sWidth": "null"
                    }
                    {#                    {sWidth: "70px"}#}
                ],
                "fnServerParams": function (aoData) {
                    aoData.push({
                        "name": "method",
                        "value": $('#api_method').val()
                    });
                    aoData.push({
                        "name": "srtype",
                        "value": $('#secrect_type').val()
                    });
                    aoData.push({
                        "name": "partname",
                        "value": $('#part_id').val()
                    });
                    aoData.push({
                        "name": "iDisplayLength",
                        "value": $('#iDisplayLength').val()
                    });
                    aoData.push({
                        "name": "partname",
                        "value": $('#part_id').val()
                    });
                },
                pagingType: "full_numbers",//分页样式的类型full_numbers
                sAjaxSource: "/qywx/getMember",
                fnServerData: function (sSource, aoData, fnCallback, oSettings) {
                    oSettings.jqXHR = $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": function (data) {
                            fnCallback(data.data);
                        },
                        "error": function () {
                            alert("查询失败");
                        }
                    });
                }
            });
            $('#tables').DataTable(tableConfig);
            $('#btn_search').click(function () {
                $('#tables').DataTable().fnSettings()._iDisplayStart = 0;
                $('#tables').DataTable().fnDraw();
            });
        });

    </script>
{% endblock %}